import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, Navigator } from '@tarojs/components'
import { AtButton } from 'taro-ui'

import * as api from 'src/api'
import withPage from 'src/utils/withPage'

import './index.scss'

type IProps = {}

type IState = {
  orderInfo: { [key: string]: any }
}

interface Index {
  props: IProps
  state: IState
  orderId: string
}

@withPage()
class Index extends Component {
  state: IState = {
    orderInfo: {},
  }

  onLoad(options) {
    if (!options.order_id) {
      return Taro.showToast({
        title: '缺少参数无法查看订单支付状态',
        icon: 'none',
      })
    }
    this.orderId = options.order_id
    this.getOrderDetail()
  }

  getOrderDetail = async () => {
    Taro.showLoading({
      title: '正在加载中',
    })
    const res = await api.getOrder(this.orderId)
    this.setState({ orderInfo: res || {} })
    Taro.hideLoading()
  }

  makePhoneCall = () => {
    Taro.makePhoneCall({ phoneNumber: this.state.orderInfo.shop?.telephone })
  }

  render() {
    const { orderInfo } = this.state
    return (
      <View className="order-created">
        <View className="icon">
          <View className="at-icon at-icon-check"></View>
        </View>
        <View className="status">订单提交成功</View>
        <View className="wrapper">
          <View className="info">
            <Text className="price-color">请在24小时内</Text>
            ，联系以下店铺付款
          </View>
          <View className="info">
            <Text className="name">{orderInfo.shop?.name}</Text>
          </View>
          <View className="info">地址：{orderInfo.shop?.address || ''}</View>
          <View className="info">
            电话：
            <Text className="link" onClick={this.makePhoneCall}>
              {orderInfo.shop?.telephone || ''}
            </Text>
          </View>
          <View className="info">或添加该店铺客服微信咨询</View>
          <Image
            className="qr-img"
            src={orderInfo.shop?.imageUrl}
            showMenuByLongpress
          ></Image>
          <View className="item acea-row row-between-wrapper">
            <View>订单编号</View>
            <View className="itemCom">{orderInfo.orderId}</View>
          </View>
          <View className="item acea-row row-between-wrapper">
            <View>下单时间</View>
            <View className="itemCom">
              {orderInfo.createTime ? orderInfo.createTime : '-'}
            </View>
          </View>
          <View className="item acea-row row-between-wrapper">
            <View>支付金额</View>
            <View className="itemCom">{orderInfo.payPrice}</View>
          </View>
        </View>
        <Navigator
          url={`/pages/order_detail/index?order_id=${this.state.orderInfo.orderId}`}
        >
          <AtButton className="btn primary" type="primary" circle>
            查看订单
          </AtButton>
        </Navigator>
        <Navigator url="/pages/index/index" openType="switchTab">
          <AtButton className="btn" circle>
            返回首页
          </AtButton>
        </Navigator>
      </View>
    )
  }
}

export default Index
